<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round z-index="104"
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content">

                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> {{title}}</view>
                        <van-icon name="cross" color="#FFFFFF" size="15" @click="closePopup" />
                    </view>
                    <view class="subtitle">选择申请售后的商品</view>
                    <scroll-view class="scroll-content " scroll-y :lower-threshold="120" show-scrollbar="false">
                        <view class="packageList">
                            <!-- <van-radio-group :value="radio" @change="onChange"> -->
                            <van-checkbox-group ref="checkboxGroup" :value="checked" :checked="checked"
                                @change="handleCheck">
                                <view class="packageWrapper clearfix" v-for="(i, index) in packageList" :key="index">
                                    <view class="productCard">
                                        <van-checkbox v-model="item.status" shape="round"
                                            @click.stop="onChange('单选', i)" :label-disabled="false"
                                            :disabled="i.afterSalesStatus!==-1 && i.afterSalesStatus!=='' && i.afterSalesStatus!==3 ? true : false"
                                            use-icon-slot>
                                            <image
                                                :src="i.afterSalesStatus!==-1 && i.afterSalesStatus!==''&& i.afterSalesStatus!==3 ? disabledIcon : (i.status ? activeIcon : inactiveIcon)"
                                                @click.stop="onChange('单选', i)" slot="icon" class="checked-img" />
                                        </van-checkbox>
                                        <!-- <van-radio :name="index" checked-color="#ff6203"></van-radio> -->
                                        <view class="prodectCardItem" @click="handleChecked($event,id,index)"
                                            :id="orderDetailId">
                                            <view class="wraper_left">
                                                <view class="goodsPic">
                                                    <!-- <img :src="item.imgUrl" alt="" style="width: 93px;height: 93px;"> -->
                                                    <img class="img" :src="i.imgUrl" mode="widthFix" />
                                                </view>
                                                <view class="goodsText">
                                                    <view class="goodsTop">
                                                        <view class="goods_T">{{ i.productName }}</view>
                                                        <view class="goods_price">X {{ i.buyNum }}</view>
                                                    </view>
                                                    <view class="googsMiddle">
                                                        <view class="goods_specs">{{ i.specName }}</view>
                                                    </view>
                                                    <view class="goodsBottom">
                                                        <view class="jifen_box"> <span v-if="i.productPrice && i.productPrice!=='0' ">￥{{ i.productPrice }}</span>   <span v-if="i.productPrice && i.productPrice!=='0'&&i.maxUsefulPoints && i.maxUsefulPoints !=='0'">+ </span> <span v-if="i.maxUsefulPoints && i.maxUsefulPoints !=='0'"><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                                                                alt=""
                                                                style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;" />
                                                            {{ i.maxUsefulPoints }}</span>
                                                        </view>
                                                    </view>
                                                </view>
                                            </view>
                                            <!-- <view class="wraper_right" @click="toLogisticsDetail">
                                                <van-icon name="arrow" />
                                            </view> -->
                                        </view>
                                    </view>


                                </view>
                            </van-checkbox-group>
                            <!-- </van-radio-group> -->
                        </view>
                    </scroll-view>
                </view>
                <view class="btn-area custom-button">
                    <van-button  type="primary" @click="submitApply" class="">确认申请售后</van-button>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// import { getAfterSalesOrderApi} from '@/api/order'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        orderDetailIdList: {
            type: Array,
            default: () => []
        },
        orderId: {
            type: String,
            default: () => ''
        },
        ordeDetailProductInfoList: {
            type: Array,
            default: () => []
        },
        sourceType: {
            type: String,
            default: () => ''
        },
        refundType:{ // 退款类型 1-仅退款 2-退货退款
            type: String,
            default: () => ''
        },
        afterSalesType:{ // 售后类型 2-仅退款 1-退货退款 3-其他 4-服务退款
            type: String,
            default: () => ''
        },
    },
    data () {
        return {
            curS: 0,
            curSName: '',
            curR: 0, // 价格区间·
            date: '',
            title: '申请售后',
            option: {},
            url: '',
            radio:1,
            packageList: [
                // {
                //     orderDetailId:1,
                //     productId: 11,
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     productName: '黄芪杞姜枣糕红枣',
                //     productPrice: '15',
                //     buyNum: '1',
                //     maxUsefulPoints: 190,
                //     money: '120',
                //     specName: '口味一：五斤装',
                //     status: false
                // },
                // {
                //     orderDetailId:2,
                //     productId: 12,
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     productName: '黄芪杞姜枣糕红枣枸杞 口味一：五斤装',
                //     productPrice: '16',
                //     buyNum: '1',
                //     maxUsefulPoints: 190,
                //     money: '120',
                //     specName: '口味一：五斤装',
                //     status: false
                // },
            ],
            popupHeight: '300',
            showMark:true,
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            checked: [], // 已选择的数据的id
            checkAll: false, // 标记是否全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            localPackageList: [] // 新增本地处理后的数据
        }
    },

    computed: {
        newOrdeDetailProductInfoList(){
            return this.ordeDetailProductInfoList.filter(i => i.afterSalesStatus!==-1 && i.afterSalesStatus!==''&& i.afterSalesStatus!==3)
        }
    },

    watch: {
        show: {
            immediate: true,
            async handler(newVal) {
                console.log(newVal, 'show---售后弹窗',this.orderId,this.orderDetailIdList)
                if (newVal && this.orderId && this.orderDetailIdList?.length) {
                    // 弹窗显示时调用接口
                //    await this.loadAfterSalesData()
                }
            }
        },
        ordeDetailProductInfoList: {
            immediate: true,
            handler(newVal) {
                if (newVal?.length) {
                    this.packageList = newVal.map(item => ({
                        ...item,
                        status: false
                    }))
                }
            }
        },
        newOrdeDetailProductInfoList: {
            immediate: true,
            handler(newVal) {
                if (newVal?.length) {
                    var i = 0
                    this.newOrdeDetailProductInfoList.forEach(item => {
                        if (item.status === true) {
                            i++
                        }
                        console.log(this.newOrdeDetailProductInfoList, 'newOrdeDetailProductInfoList')
                        this.checkAll = i === this.newOrdeDetailProductInfoList.length

                    })
                }
            }
        },
        
        // packageList: {
        //     handler(val) {
        //         console.log(val, 'packageList')
        //         var i = 0
        //         this.packageList.forEach(item => {
        //             if (item.status === true) {
        //                 i++
        //             }
        //         // this.checkAll = i === this.packageList.length
        //         })
        //     },
        //     deep: true
        // },
        checked: {
            handler(val) {
                console.log(val, 'checked')
            }
        },
        selectedRowKeys: {
            handler(val) {
                console.log(val, 'selectedRowKeys')

            }
        },
        selectedRows: {
            handler(val) {
                console.log(val, 'selectedRows')
            }
        }
    },
    onLoad () { },
    onReady () {
        console.log('onReady')
        console.log(this.orderId, 'orderId',this.orderDetailIdList)
        // this.loadAfterSalesData()
        // getAfterSalesOrderApi({orderId:this.orderId,orderDetailIdList:this.orderDetailIdList}).then(res => {
        //     console.log(res, 'getAfterSalesOrderApi')
        //     if (res.code === 200) {
        //         // this.packageList = res.data
        //     }
        // })
    },
    onShow(){
        // this.loadAfterSalesData()
    },

    methods: {
        // 新增数据加载方法
        // async loadAfterSalesData() {
        //     try {
        //          // 添加加载状态
        //         uni.showLoading({ title: '加载中...' })
        //         const res = await getAfterSalesOrderApi({
        //             orderId: this.orderId,
        //             orderDetailIdList: this.orderDetailIdList
        //         })
        //         if (res.code === 200) {
        //             // 处理接口返回数据并添加status字段
        //             this.packageList = res.data.map(item => ({
        //                 ...item,
        //                 status: false
        //             }))
        //         }
        //     } catch (error) {
        //         console.error('获取售后数据失败:', error)
        //     } finally {
        //         uni.hideLoading()
        //     }
            
        // },
        // 关闭弹窗
        closePopup () {
            this.$emit('closeApply')
        },

        // 确定申请售后
        submitApply () {
            if (this.selectedRows.length === 0) {
                uni.showToast({
                    title: '请选择要售后的商品',
                    icon: 'none'
                })
                return
            }
            // const params = {}
            // uni.navigateTo({
            //     url: '/pages/orders/afterSales?params=' +
            //     encodeURIComponent(JSON.stringify(params))
            // })
            const params = {
                title: this.refundType == '2' ? '退款' : '退货退款',
                orderId: this.orderId,
                orderDetailIdList: this.selectedRowKeys,
                sourceType: this.sourceType,
                afterSalesType: this.afterSalesType,
            }
            uni.navigateTo({
                url: '/pages/afterSales/refundDetails?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
            this.$emit('closeApply')
        },

        onChange(type, item) {
            console.log(type, 'type', 'onChange')
            if (item.afterSalesStatus!==-1 && item.afterSalesStatus!==''&& item.afterSalesStatus!==3 ) {
                return
            }
            item.status = !item.status;
            this.handleCheckLogic(item, item.status);
        },
        // // 提取公共的全选处理逻辑
        // handleSelectAll(checked, isManageMode) {
        //     const targetList = isManageMode ? this.packageList : this.newOrdeDetailProductInfoList;
        //     const allCheckedIds = targetList.map(item => item.orderDetailId)
        //     const allIds = this.newOrdeDetailProductInfoList.map(item => item.orderDetailId)  //排除不可点击元素  只对可点击元素进行操作

        //     targetList.forEach(item => { item.status = checked })

        //     if (checked) {
        //         this.checked = allCheckedIds;
        //         this.selectedRows = JSON.parse(JSON.stringify(targetList));
        //     } else {
        //         this.checked = [];
        //         this.checkAll = false;
        //         this.selectedRows = [];
        //     }
        //     this.selectedRowKeys = this.checked;
        // },
        // 提取公共的勾选逻辑
        handleCheckLogic(item, checked) {
            const index = this.selectedRowKeys.indexOf(item.orderDetailId);
            if (checked && index === -1) { // 如果勾选，则将商品ID和商品信息添加到已选列表中
                this.selectedRowKeys.push(item.orderDetailId);
                this.selectedRows.push(item);
            } else if (!checked && index > -1) { // 如果取消勾选，则从已选列表中移除该商品
                this.selectedRowKeys.splice(index, 1);
                this.selectedRows.splice(index, 1);
            }
        },

        handleChecked(e,id,val){
            console.log(e,'e',id,val)
            this.radio=val
        }

    }

}
</script>
<style lang="scss" scoped>

::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}

// 最外层
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // height: 100vh;
    // height: calc(100vh - 50px);
    overflow-y: auto;
    z-index: -2;
    // background-size: 100%;
    scrollbar-width: none;
    /* 针对Firefox */
}
// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
    // height: 100vh;
    // overflow: hidden;
}

// 提示框
.popup-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 48rpx 0rpx;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;

    .popup-main {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
        padding: 0rpx 48rpx;
        padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
    }

    .popupTitle {
        font-size: 40rpx;
        text-align: left;
        color: #111111;
        line-height: 40rpx;
    }
    .subtitle{
        font-size: 24rpx;
        color: #666666;
        line-height: 24rpx;
        margin-top: 22rpx;
    }

    .packageList {
        width: 100%;
        background-color: #ffffff;
        padding-bottom: 42rpx;
        padding-top:42rpx;
    }

    .packageWrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .packageWrapper:last-child {
        margin-bottom: 0px;
    }

    .productCard {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        width: 100%;

        .prodectCardItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            // margin-bottom: 10px;
        }
    }
    .wraper_right {
        width:20%;
        padding-left: 10rpx;
        text-align: center;
    }
    .wraper_left {
        display: flex;
        // float: left;
        width: 100%;
        margin-bottom: 15px;

        .goodsPic {
            width: 33%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .goodsText {
            position: relative;
            width: 67%;
            margin-left: 14px;
            // width: 150px;
            display: flex;
            flex-direction: column;
            // padding-top: 5px;
            // padding-bottom: 6px;
            padding-top: 12rpx;
            padding-bottom: 20rpx;
            text-align: left;

            .goodsTop {
                position: absolute;
                // top: 2%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .goods_T {
                    font-size: 28rpx;
                    text-align: left;
                    color: #111111;
                    max-width: 80%;
                    line-height: 28rpx;
                    // margin-top: 9px;  //display：flex   中 元素居中
                    white-space: nowrap;
                    /* 防止文本换行 */
                    overflow: hidden;
                    /* 超出部分隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */

                }

                // 商品价格
                .goods_price {
                    font-size: 28rpx;
                    color: #737373;
                    line-height: 28rpx;
                }
            }

            .googsMiddle {
                position: absolute;
                top: 30%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 22rpx;
                color: #666666;

                .goods_specs {
                    // margin-top: 7px;
                    max-width: 80%;
                    font-size: 22rpx;
                    text-align: left;
                    color: #666666;
                    //   line-height: 11px;

                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                }

                .goods_num {
                    font-size: 22rpx;
                    line-height: 22rpx;
                    color: #666666;
                }

            }

            .goodsBottom {
                position: absolute;
                top: 77%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                //   max-width: 90%;
                // margin-top: 30px;

                .money {
                    font-size: 28rpx;
                    text-align: left;
                    color: #737373;
                    line-height: 28rpx;
                    // margin-right: 21px;
                }

                .jifen_box {
                    display: flex;
                    align-items: center;
                    font-size: 28rpx;
                    text-align: left;
                    color: #999999;
                    line-height: 28rpx;
                    height: 28rpx;
                }
            }
        }
    }

    .wraper_left:last-child {
        margin-bottom: 0px;
    }

    // 加入购物车按钮
    .goodsAction {
        margin-top: 22px;
        width: calc(100% - 48px);
        text-align: center;
        // background-color: aquamarine;
        height: 70px;
    }

    .button {
        width: 100%;
        font-size: 16px;
        color: #ffffff;
        height: 44px;
        line-height: 44px;
        border-radius: 25px;
        border-style: initial !important;
        padding: 0 !important;
        background: #FF6203 !important;
    }
}
.btn-area{
    position: fixed;
    bottom: 0;
    width: calc(100% - 96rpx);
    padding-left: 48rpx;
    padding-right: 48rpx;
    background: #ffffff;
    z-index: 100;
    height: 144rpx;
    line-height: 144rpx;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // flex-direction: column;
    border-top: 1px solid #f9f9f9;
}
.checked-img {
    height: 16px;
    width: 16px;
}

::v-deep .custom-class, .van-button, .van-button--primary, .van-button--normal{
    width: 100% !important;
}
::v-deep .van-button--danger, .van-button--warning, .van-button--normal, .van-goods-action-button__inner {
    font-weight: normal !important;
    width: 100% !important;
}
::v-deep .van-cell {
    border: 1px solid #888888 !important;
}

::v-deep .van-cell--hover .hover-class {
    border: 1px solid #888888;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>
